<template>
	<view class="crm-content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<uni-nav-bar fixed class="unibarS">
			<block slot="left">
				<text>CRM</text>
			</block>
			<block slot="right">
				<uni-icons type="search" size="26" @click="goSearch()"></uni-icons>
				<!-- <uni-icons type="gear" size="26" style="margin-left: 10rpx"></uni-icons> -->
			</block>
		</uni-nav-bar>
		<!-- 九宫格 -->
		<view class="grid-box">
			<view class="grid-title">常用功能</view>
			<u-grid :border="false" col="5">
				<u-grid-item @click="goCustomer()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_1.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">客户管理</text>
				</u-grid-item>
				<u-grid-item @click="goOpportunity()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_2.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">商机管理</text>
				</u-grid-item>
				<u-grid-item @click="goOrder()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_3.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">订单管理</text>
				</u-grid-item>
				<u-grid-item @click="goFollow()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_4.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">跟进记录</text>
				</u-grid-item>
				<u-grid-item @click="goReport()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_5.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">统计报表</text>
				</u-grid-item>
				<u-grid-item @click="goPayment()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_6.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">回款管理</text>
				</u-grid-item>
				<u-grid-item @click="goRefund()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_7.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">退款管理</text>
				</u-grid-item>
				<u-grid-item @click="goGoods()" :customStyle="{ height: 170 + 'rpx' }">
					<u--image :src="'/static/img/crm/often_4.png'" width="96rpx" height="96rpx"></u--image>
					<text class="grid-text">商品管理</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 数据简报 -->
		<view class="data-board">
			<view class="data-board-title">
				<text class="data-board-title-text">数据简报</text>
				<view class="data-board-title-sieving" @click="openHandle()">
					<svg-icon svgPath="/static/svg/icon-shaixuan.svg" color="#4DACB1" size="13px"
						style="margin-top: 4rpx;" />
					<text>筛选</text>
				</view>
			</view>
			<u-row customStyle="margin-top: 50rpx" justify="center">
				<u-col span="6">
					<view class="col-box" @click="goCustomer()">
						<u--image class="left-box" :src="'/static/img/crm/briefing_1.png'" width="96rpx"
							height="96rpx"></u--image>
						<view class="right-box">
							<view class="right-box-num">{{ info.customerAdd || 0 }}</view>
							<view class="right-box-text">新增客户</view>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="col-box" @click="goOpportunity()">
						<u--image class="left-box" :src="'/static/img/crm/briefing_2.png'" width="96rpx"
							height="96rpx"></u--image>
						<view class="right-box">
							<view class="right-box-num">{{ info.opportUnityAdd || 0 }}</view>
							<view class="right-box-text">新增商机</view>
						</view>
					</view>
				</u-col>
			</u-row>
			<u-row customStyle="margin-top: 50rpx" justify="center">
				<u-col span="6">
					<view class="col-box" @click="goFollow()">
						<u--image class="left-box" :src="'/static/img/crm/briefing_3.png'" width="96rpx"
							height="96rpx"></u--image>
						<view class="right-box">
							<view class="right-box-num">{{ info.recordAdd || 0 }}</view>
							<view class="right-box-text">跟进次数</view>
						</view>
					</view>
				</u-col>
				<u-col span="6">
					<view class="col-box" @click="goOrder()">
						<u--image class="left-box" :src="'/static/img/crm/briefing_4.png'" width="96rpx"
							height="96rpx"></u--image>
						<view class="right-box">
							<view class="right-box-num">{{ info.orderAdd || 0 }}</view>
							<view class="right-box-text">新增订单</view>
						</view>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 筛选 -->
		<uni-popup ref="popup" type="right" @maskClick="maskClick" border-radius="10px 10px 0 0">
			<view class="drawer-box">
				<view class="drawer-content">
					<u--form labelPosition="top" ref="uForm" labelWidth="100">
						<u-form-item label="时间" border
							ref="item1">
							<view class="drawer-classify">
								<view v-for="(item, index) in tiemList" :key="index" @click="changeTime(item.value)" :class="{ active: tempSearchObj.type == item.value }">{{ item.name }}</view>
							</view>
						</u-form-item>
						<u-form-item class="search-item-box" label="时间段" @click="openCalendar()" border ref="item1">
							<view>
								<view v-if="tempSearchObj.startTime && tempSearchObj.endTime">{{ tempSearchObj.startTime + '至' + tempSearchObj.endTime }}</view>
								<view v-else>选择范围</view>
							</view>
							<u-icon slot="right" name="clock"></u-icon>
						</u-form-item>
					</u--form>
				</view>
				<view class="drawer-footer">
					<view class="drawer-footer-res" @click="reset">重置</view>
					<view class="drawer-footer-sub" @click="submit">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 选择跟进日期 -->
		<uni-calendar ref="calendar" class="uni-calendar--hook" :range="true" :clear-date="true" :date="infoCalendar.date"
		:insert="infoCalendar.insert" @confirm="confirmCalendar" @close="closeCalendar" />

	</view>
</template>
<script>
import { calculateDateRange } from '@/common/utils'
export default {
	data() {
		return {
			title: "Hello",
			info: {},
			tempSearchObj: {
				type: 1,
				startTime: null,
				endTime: null
			},
			tiemList: [
				{ 	name: '今年', value: 1  },
				{ 	name: '本季度', value: 2  },
				{ 	name: '上季度', value: 3  },
				{ 	name: '本月', value: 4  },
				{ 	name: '上月', value: 5  },
				{ 	name: '本周', value: 6  },
				{ 	name: '上周', value: 7  },
				{ 	name: '昨天', value: 8  },
				{ 	name: '今天', value: 9  },
			],
			infoCalendar: {
                insert: false,
                selected: []
            },
			statisticsQuery: {
				type: 1,
				startTime: null,
				endTime: null
			}
		};
	},
	onShow() {
		const [start, end] = calculateDateRange(this.statisticsQuery.type)
		this.statisticsQuery.startTime = start
		this.statisticsQuery.endTime = end

		this.getData()
	},
	methods: {
		// 数据简报
		getData() {
			this.$http.get('/app/customer/getCrmStatistics', this.statisticsQuery).then(res => {
				if (res.code == 200) {
					this.info = res.data
				}
			})
		},
		// 客户管理
		goCustomer() {
			uni.navigateTo({
				url: '/pages/crm/customer/customerManage'
			});
		},
		// 商机管理
		goOpportunity() {
			uni.navigateTo({
				url: '/pages/opportunity/index'
			});
		},
		// 订单管理
		goOrder() {
			uni.navigateTo({
				url: '/pages/order/index'
			});
		},
		// 跟进记录
		goFollow() {
			uni.navigateTo({
				url: '/pages/follow/index'
			});
		},
		// 商品管理
		goGoods() {
			uni.navigateTo({
				url: '/pages/goods/index'
			});
		},
		// 统计报表
		goReport() {
			uni.navigateTo({
				url: '/pages/crm/report/index'
			});
		},

		// 回款管理
		goPayment() {
			uni.navigateTo({
				url: '/pages/payment/index'
			});
		},
		// 退款管理
		goRefund() {
			uni.navigateTo({
				url: '/pages/refund/index'
			});
		},
		goSearch() {
			uni.navigateTo({
				url: '/pages/other/search'
			});
		},
		openHandle() {
			Object.keys(this.statisticsQuery).forEach(key => {
				if (this.tempSearchObj.hasOwnProperty(key)) {
					this.tempSearchObj[key] = this.statisticsQuery[key];
				}
			});
			uni.hideTabBar();
			this.$refs.popup.open()
		},
		reset() {
			this.submit()
			uni.showTabBar();
			this.tempSearchObj.type = 1

			const [start, end] = calculateDateRange(this.tempSearchObj.type);
			this.tempSearchObj.startTime = start
			this.tempSearchObj.endTime = end
			this.getData()
		},
		submit() {
			uni.showTabBar();
			this.$refs.popup.close()
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.statisticsQuery.hasOwnProperty(key)) {
					this.statisticsQuery[key] = this.tempSearchObj[key];
				}
			});
			this.getData()
		},
		maskClick() {
			uni.showTabBar();
			this.$refs.popup.close()
		},
		// 打开日历
		openCalendar(type) {
			this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
			if(e.range.before && e.range.after) {
				let arr = []
				arr[0] = e.range.before? e.range.before : null
				arr[1] = e.range.after? e.range.after : null
				this.tempSearchObj.startTime = arr[0]
				this.tempSearchObj.endTime = arr[1]
			} else {
				this.tempSearchObj.startTime = null
				this.tempSearchObj.endTime = null
				return
			}
			this.tempSearchObj.type = null
        },
        // 关闭日历
        closeCalendar() { },
		changeTime(type) {
			this.tempSearchObj.type = type
			const [start, end] = calculateDateRange(type);
			this.tempSearchObj.startTime = start
			this.tempSearchObj.endTime = end
		},
	}
};
</script>

<style lang="scss" scoped>
.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		background-color: white !important;
		border-bottom: none !important;
		// box-shadow: 0px 2px 10px  rgba(227, 227, 227, 0.5);
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}

	/deep/.uni-navbar__header-btns-left {
		font-size: 36rpx;
	}
}

.crm-content {
	padding: 0 32rpx;

	.grid-box {
		.grid-title {
			margin-top: 50rpx;
			margin-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(12, 16, 25, 1);
		}

		.grid-text {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(12, 16, 25, 1);
			margin-top: 12rpx;
		}
	}

	.data-board {
		margin-top: 32rpx;

		.data-board-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 50rpx;

			.data-board-title-text {
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(12, 16, 25, 1);
			}

			.data-board-title-sieving {
				display: flex;
				align-items: center;

				text {
					font-size: 24rpx;
					font-weight: 500;
					color: rgba(77, 172, 177, 1);
					margin-left: 6rpx;
				}
			}
		}

		.col-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.left-box {
				margin-right: 24rpx;
			}

			.right-box {
				display: flex;
				flex-direction: column;
				justify-content: center;

				.right-box-num {
					font-size: 40rpx;
					font-weight: 500;
					color: rgba(12, 16, 25, 1);
					margin-bottom: 4rpx;
				}

				.right-box-text {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(103, 117, 133, 1);
				}
			}
		}
	}
}

.drawer-box {
	width: 622rpx;
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: white;

	.drawer-content {
		flex: 1;
		overflow-y: auto;
		padding: 0 24rpx;

		.drawer-classify {
			display: flex;
			flex-wrap: wrap;

			>view {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(103, 117, 133, 1);
				border-radius: 16rpx;
				background: #FFFFFFFF;
				border: 2rpx solid #67758566;
				padding: 16rpx 0;
				width: 174rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				text-align: center;
			}

			:nth-child(3n) {
				margin-right: 0;
			}

			.active {
				border: none;
				background: #4DACB1FF;
				color: rgba(255, 255, 255, 1);
			}
		}
		.search-item-box {
			/deep/.u-form-item__body__right {
				border: 2rpx solid rgba(103, 117, 133, 0.4);
				padding: 16rpx 16rpx;
				border-radius: 8rpx;
			}
		}
	}

	.drawer-footer {
		padding: 24rpx;
		display: flex;

		>view {
			border-radius: 8rpx;
			text-align: center;
			height: 44px;
			line-height: 44px;
			font-size: 32rpx;
			font-weight: 500;
		}

		.drawer-footer-res {
			height: 42px;
			width: 154rpx;
			background: #FFFFFFFF;
			border: 3rpx solid #4DACB1FF;
			color: rgba(77, 172, 177, 1);
			margin-right: 20rpx;
		}

		.drawer-footer-sub {
			flex: 1;
			background: #4DACB1FF;
			color: #FFFFFFFF;
		}
	}
}
</style>